<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--1.给一个放图的容器-->
<div id="ec" style="width: 100%;height: 400px;"></div>

</body>
</html>
<!--引入juqery-->
<script src="jquery/jquery-1.12.4.min.js"></script>
<!--引入echarts.js文件-->
<script src="layuiadmin/lib/extend/echarts.js"></script>
<script>
    // 页面刚加载的时候
    window.onload = function (ev) {
        $.ajax({
            type: 'get',
            url: '/whitelistSetting/stat',
            success: function (res) {
                // 利用echatrs初始化容器
                var obj = echarts.init(document.getElementById("ec"))

                // 配置容器项
                var option = {
                    title: {
                        text: '学生数据统计'
                    },
                    tooltip: {},
                    legend: {
                        data: ['数量']
                    },
                    xAxis: {
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        },
                        data: []
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: []
                        }
                    ]
                };

                var list = res.data
                for(var i=0;i<list.length;i++){
                    option.xAxis.data.push(list[i].name)
                    option.series[0].data.push(list[i].number)

                }
                // 赋值
                obj.setOption(option)

            }
        })
    }
</script>